import React, { useEffect, useRef, useState } from "react";
import Cropper from "react-cropper";

import "cropperjs/dist/cropper.css";
import styles from "./index.module.scss";
import { webpIsSupported } from "@/app/utils";

let cropper: any;
function AvatorCropper(props: any) {
  const cropperRef = useRef<HTMLImageElement | null>(null);
  const isSupportWebp = useRef(false);
  useEffect(() => {
    const imageElement: any = cropperRef?.current;
    cropper = imageElement?.cropper;
    webpIsSupported().then((res) => {
      isSupportWebp.current = res;
    });
  }, []);
  const rotate = (deg: number) => {
    cropper.rotate(deg);
  };
  const upload = () => {
    let width = 300;
    let height = 400;
    if (props.fileRef.current.files?.[0]) {
      if (
        cropperRef.current!.width > 2000 &&
        cropperRef.current!.width <= 3000
      ) {
        width = 600;
        height = 800;
      }
      if (
        cropperRef.current!.width > 3000 &&
        cropperRef.current!.width <= 4000
      ) {
        width = 900;
        height = 1200;
      }
      if (cropperRef.current!.width > 4000) {
        width = 1200;
        height = 1600;
      }
    } else {
      width = cropperRef.current!.width;
      height = cropperRef.current!.height;
    }
    cropper
      .getCroppedCanvas({
        fillColor: "transparent",
        width,
        height,
        imageSmoothingEnabled: true,
        imageSmoothingQuality: "high",
      })
      .toBlob(
        (blob: Blob) => {
          props.onChange(blob, width);
        },
        isSupportWebp.current ? "image/webp" : "image/png"
      );
  };

  return (
    <>
      <div className={styles.cropperContainer}>
        <div className={styles.cropperBody}>
          <div className={styles.title}>
            上传头像
            <svg
              xmlns="http://www.w3.org/2000/svg"
              onClick={() => {
                props.onClose();
              }}
              style={{ float: "right", cursor: "pointer" }}
              width={20}
              fill="none"
              viewBox="0 0 13 12"
            >
              <path
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M11.565 1.22l-9.992 9.54M11.567 10.766l-10-9.55"
              ></path>
            </svg>
          </div>
          <Cropper
            className={styles.cropper}
            src={props.src}
            style={{ height: "400px", width: "100%", margin: "0 auto" }}
            viewMode={1}
            initialAspectRatio={3 / 4}
            aspectRatio={3 / 4}
            zoomable={true}
            scalable={true}
            dragMode={"move"}
            ref={cropperRef}
            zoomTo={0.5}
            minCropBoxHeight={80}
            minCropBoxWidth={60}
            background={false}
            responsive={true}
            autoCropArea={1}
            checkOrientation={false} // https://github.com/fengyuanchen/cropperjs/issues/671
            guides={true}
          />
          <div className={styles.btns}>
            <button
              className={styles.btn}
              color="warning"
              onClick={() => rotate(-90)}
            >
              <svg
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
              >
                <path
                  d="M96.4 116.9l80.6 80.6c80.7-81.3 192.5-131.8 316.1-132 246.2-0.5 447.3 199.7 447.7 445.9C941.2 758.5 741 959 494 959c-131.9 0-250.4-57.1-332.2-148-37.2-41.4-7.9-107.4 47.8-107.9 18.5-0.2 36.2 7.5 48.5 21.2 58.1 64.5 142.3 105.1 235.9 105.1 176.1 0 318.8-143.5 317.3-320-1.5-176.2-145.1-316.6-321.4-314.4-86.6 1.1-164.8 36.9-221.4 94.1l79.6 79.6c11.8 11.8 3.4 31.9-13.2 31.9H83.2c-10.3 0-18.7-8.3-18.7-18.7V130.1c0-16.6 20.1-25 31.9-13.2z"
                  fill="#fff"
                  p-id="3176"
                ></path>
              </svg>
              向左旋转
            </button>
            <button
              className={styles.btn}
              color="warning"
              onClick={() => rotate(90)}
            >
              <svg
                className={styles.rotateRight}
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
              >
                <path
                  d="M96.4 116.9l80.6 80.6c80.7-81.3 192.5-131.8 316.1-132 246.2-0.5 447.3 199.7 447.7 445.9C941.2 758.5 741 959 494 959c-131.9 0-250.4-57.1-332.2-148-37.2-41.4-7.9-107.4 47.8-107.9 18.5-0.2 36.2 7.5 48.5 21.2 58.1 64.5 142.3 105.1 235.9 105.1 176.1 0 318.8-143.5 317.3-320-1.5-176.2-145.1-316.6-321.4-314.4-86.6 1.1-164.8 36.9-221.4 94.1l79.6 79.6c11.8 11.8 3.4 31.9-13.2 31.9H83.2c-10.3 0-18.7-8.3-18.7-18.7V130.1c0-16.6 20.1-25 31.9-13.2z"
                  fill="#fff"
                  p-id="3176"
                ></path>
              </svg>
              向右旋转
            </button>
          </div>
          <div>
            <button
              color="primary"
              className={styles.uploadBtn}
              onClick={upload}
            >
              确认并上传
            </button>
            <button
              className={styles.reUploadBtn}
              onClick={() => {
                props.fileRef.current.click();
              }}
            >
              重新上传
            </button>
            <button
              className={styles.reUploadBtn}
              onClick={() => {
                props.onDelete();
              }}
            >
              删除
            </button>
          </div>
        </div>
      </div>
    </>
  );
}
export default AvatorCropper;
